<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7/css/bootstrap.css}">
    <script th:src="@{/webjars/jquery/1.11.1/jquery.js}"></script>
    <script th:src="@{/webjars/bootstrap/3.3.7/js/bootstrap.js}"></script>
    <script th:src="@{/webjars/vue/2.6.14/vue.js}"></script>
    <script th:src="@{/webjars/axios/0.26.0/dist/axios.js}"></script>
</head>
<body>
    <div class="container" id="app">
        <p th:if="${session.loginUser!=null}">欢迎你,
            <b th:text="|${session.loginUser.nickName}(${session.loginUser.username})|"></b>
            <a title="注销登陆" th:href="@{/logout}" class="btn btn-link">登出</a>
        </p>
        <p th:unless="${session.loginUser!=null}">
            <a class="btn btn-link" th:href="@{/login}">去登录</a>
        </p>

        <h1>图书列表-VUE</h1>
        <div class="text-right" th:if="${session.loginUser!=null and session.loginUser.role.name eq '管理员'}">
            <a class="btn btn-default" th:href="@{/book/add}">添加图书<span class="glyphicon glyphicon-plus"></span></a>
            <a class="btn btn-primary" th:href="@{/discount/list}">查看折扣规则</a>
        </div>
        <div>
            <form class="form-inline" th:action="@{/book/list}">
                <label>书名</label>
                <input class="form-control" type="text" name="name" v-model="bookName"  placeholder="请输入关键字快速查找图书" th:value="${bookName}">
                <label>图书类别</label>
                <select class="form-control" type="text" name="category.id" v-model="categoryId">
                    <option value="0" th:text="全类别"></option>
    <!--                <option th:each="category:${categories}" th:value="${category.id}" th:text="${category.name}"-->
    <!--                th:selected="${categoryId==category.id}"></option>-->
                <!--vue-->
                    <option v-for="item in categoryList" v-bind:value="item.id">{{item.name}}</option>
                </select>
                <button class="btn btn-default" type="button" @click="loadBookList">查找<span class="glyphicon glyphicon-search"></span></button>
            </form>
        </div>
        <table class="table table-striped table-hover">
            <thead>
            <tr>
                <th>序号</th>
                <th>书名</th>
                <th>作者</th>
                <th>类别</th>
                <th>库存</th>
                <th>定价</th>
                <th>促销价</th>
                <th>会员价</th>
            </tr>
            </thead>
            <tbody>
    <!--            &lt;!&ndash;                使用themeleaf完成数据渲染&ndash;&gt;-->
    <!--            <tr th:each="book:${bookList}" th:object="${book}">-->
    <!--                <td th:text="*{id}"></td>-->
    <!--                <td th:text="*{name}"></td>-->
    <!--                <td th:text="*{author}"></td>-->
    <!--                <td th:text="*{category.name}"></td>-->
    <!--                <td th:text="*{repository}"></td>-->
    <!--                <td th:text="*{price}"></td>-->
<!--                    <td th:text="*{promotionPrice==null}?'&#45;&#45;':*{promotionPrice}"></td>-->
<!--                    <td th:text="*{VipPrice==null}?'&#45;&#45;':*{VipPrice}"></td>-->
    <!--            </tr>-->
                <tr v-for="book in bookList">
                    <td>{{book.id}}</td>
                    <td>{{book.name}}</td>
                    <td>{{book.author}}</td>
                    <td>{{book.category.name}}</td>
                    <td>{{book.repository}}</td>
                    <td>{{book.price}}</td>
                    <td class="text-center">{{book.promotionPrice==null?'--':book.promotionPrice}}</td>
                    <td class="text-center">{{book.VipPrice==null?'--':book.VipPrice}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" >
        var vm = new Vue({
            el:"#app",
            data:{
                categoryList:[],
                bookList:[],
                bookName:'',
                categoryId: 0
            },
            methods:{
                loadBookList:function (){
                    // alert("hello book.")
                    // axios.get("/book/list2",{
                    //     params:{
                    //         "name":this.bookName,
                    //         "category.id": this.categoryId
                    //     }
                    // })
                    //     .then(function (response){
                    //         vm.bookList = response.data;
                    //     });
                    axios.post("/book/list2",{
                            "name":this.bookName,

                            "category": {
                                "id":this.categoryId
                            }
                    })
                        .then(function (response){
                            vm.bookList = response.data;
                        });
                }
            },
            mounted:function (){
                // axios.get("/book/category/list")
                //     .then(response=>(vm.categoryList = response));
                //
                axios.get("/book/category/list")
                    .then(function (response){
                        vm.categoryList = response.data;
                    });
            }
        });
    </script>
</body>
</html>